<include file="Public/header" />
<link rel="stylesheet" href="__CSS__/share.css">
    <!--谱单信息-->
    <div class="bg-grey">
        <div class="container bg-light-grey content-border">
            <!--分享窗口-->
            <div class="share-dialog">
                <div class="share-close"></div>
                <div class="share-dialog-title">分享</div>
                <div class="share-dialog-cont">
                    <div class="share-copy">
                        <div class="share-copy-l">分享链接：</div>
                        <div class="share-copy-c"><input id="copytext" type="text"></div>
                        <div id="btnCopy" class="share-copy-r"  data-clipboard-target="#copytext">复制链接</div>
                        <div class="clear"></div>
                    </div>
                    <div class="share-platform">
                        <div class="share-platform-l">社交平台：</div>
                        <div class="share-platform-r">
                            <div class="bdsharebuttonbox">
                                <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                                <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                                <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                                <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                            </div>
                            <div class="share-platform-text">
                                您可以直接复制短链，分享给朋友，也可直接点击社交平台图标，指定分享。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分享窗口end-->
            <div class="pull-left score-img">
                <img <empty name="scoreInfo.img_url">src="__IMG__/score-big.png"<else/>src="{$scoreInfo.img_url}"</empty>>
            </div>
            <div class="score-info pull-left margin-left-40 margin-top-40" data-id="{$scoreInfo.id}">
                <div class="pull-left score-icon"><h2 class="margin-0 color-white bg-red font-size-18">谱单</h2></div>
                <div class="pull-left padding-left-18">
                    <h3 class="margin-0">{$scoreInfo.name}</h3>
                    <div class="margin-top-30">
                        <img class="user-img" <empty name="scoreInfo['creator_info']['avatar_url']">src="__IMG__/28.png"<else/>src="{$scoreInfo['creator_info']['avatar_url']}"</empty>>
                        <span class="user-nickname font-size-18">{$scoreInfo['creator_info']['nickname']}</span>
                    </div>
                    <div class="margin-top-30 font-size-18 score-operation clearfix">
                        <div class="pull-left score-operation-btn color-red <if condition="$loginUser['uid'] eq $scoreInfo['creator']">btn-disable</if>"
                        id="collect" data-id="{$scoreInfo.id}" data-status="{$scoreInfo.fav_status}">
                            <span class="collect_icon_red"></span>
                            <span class="text">收藏</span>
                        </div>
                        <div class="pull-left score-operation-btn color-red" id="comment">
                            <span class="comment_icon_red"></span>
                            <span>评论</span>
                        </div>
                        <div class="pull-left score-operation-btn color-red" id="share">
                            <span class="share_icon_red"></span>
                            <span>分享</span>
                        </div>
                        <div class="pull-left score-operation-btn color-red <if condition="$loginUser['uid'] neq $scoreInfo['creator']">btn-disable</if>"  id="config">
                            <span class="config_icon_red"></span>
                            <span>设置</span>
                        </div>
                    </div>
                    <div class="margin-top-30 score-tags-list">
                        <span class="score-tag">组曲</span>
                        <span class="score-tag">琴谱</span>
                    </div>
                    <div class="margin-top-30 score-description">
                        <p>{$scoreInfo.describe}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white">
        <!--曲谱列表-->
        <div class="container bg-white padding-0 content-border">
            <div class="clearfix">
                <h4 class="title-border font-bold">曲谱列表</h4>
            </div>
        </div>
        <div class="container padding-0">
            <ul class="padding-0 sheet-list content-border margin-0">
                <notempty name="sheetList">
                <volist name="sheetList" id="sheet">
                <li class="sheet-list-info bg-fringe clearfix">
                    <span class="list-num color-red pull-left margin-top-60">{$key+1}</span>
                    <div class="sheet-list-img pull-left margin-top-20 padding-bottom-20 clearfix">
                        <a href="{:U('sheet/index', 'id='.$sheet['id'].'&uid='.$loginUser['uid'])}" target="_blank"><p style="background: transparent url('{$sheet.img_url}') no-repeat; background-size: 450px;"></p></a>
                        <span class="sheet-count color-red bg-white">{$sheet.img_count}张</span>
                    </div>
                    <div class="pull-left sheet-list-info-name margin-top-30">
                        <a href="{:U('sheet/index', 'id='.$sheet['id'].'&uid='.$loginUser['uid'])}" target="_blank" class="color-black"><h1 class="margin-0 font-size-18">{$sheet.name}</h1></a>
                        <div class="margin-top-20">
                            <a href="{:U('user/index','id='.$sheet['creator'])}" class="display-inlineblock color-black">
                                <img class="user-avatar" <empty name="sheet['creator_info']['avatar_url']">src="__IMG__/avatar.png"<else/>src="{$sheet['creator_info']['avatar_url']}"</empty> >
                                <span>{$sheet['creator_info']['nickname']}</span>
                            </a>
                        </div>
                    </div>
                    <div class="font-size-16 normal-operation-btn color-red" id="normal-operation-btn1">
                        <p class="collect-btn" data-status="{$sheet.collect_status}" data-id="{$sheet.id}">收藏</p>
                        <p class="like-btn" data-status="{$sheet.fav_status}" data-id="{$sheet.id}"><span>喜欢</span></p>

                    </div>
                </li>
                </volist>
                <else/>
                    <div class="font-size-18 text-center margin-bottom-30">该谱单暂无内容，请等待更新~~!</div>
                </notempty>
                <ul class="pagination clearfix ">{$page}</ul>
            </ul>
        </div>
        <!--评论-->
        <div class="container bg-white padding-0">
            <div class="clearfix content-border">
                <h4 class="title-border font-bold">评论</h4>
            </div>
            <div class="clearfix padding-top-20 content-border">
                <div class="comment-user pull-left margin-left-40 margin-top-20">
                    <img class="img-circle" <empty name="loginUser.avatar_url">src="__IMG__/user.png"<else/>src="{$loginUser.avatar_url}"</empty>>
                </div>
                <div class="pull-left margin-left-30 clearfix">
                    <div class="remark" data-uid="{$loginUser.uid}">
                        <textarea class="comment-textarea" name="comment" placeholder="   对这个谱单说点什么吧。" onkeyup="checkLen(this, 140)"></textarea>
                    </div>
                    <div class="pull-left comment-length font-size-16">
                        <b><span>0</span>/140</b>
                    </div>
                    <div class="pull-right">
                        <button class="pull-right bg-red color-white font-size-18" id="commentBtn">发表</button>
                    </div>
                </div>
                <div class="pull-left comment-count margin-left-40 margin-top-20 margin-bottom-20">
                    <p class="font-size-16">共<span class="color-red">{$comments.count}</span>条评论</p>
                </div>
            </div>
            <div class="content-border clearfix margin-bottom-20 comment-list">
                <ul class="list list-group">
                    <volist name="comments.list" id="value">
                        <li class="padding-left-18 clearfix">
                            <div class="pull-left margin-top-20">
                                <a href="{:U('User/index', 'id='.$value['user_info']['id'])}">
                                    <img class="user-avatar" src="{$value.user_info.avatar_url}">
                                </a>
                            </div>
                            <div class="comment-info margin-left-30 margin-top-20 clearfix">
                                <p class="pull-left"><span class="font-size-16 font-bold">{$value.user_info.nickname}：</span>{$value.remark}</p>
                                <p class="pull-right">{$value.create_time}</p>
                            </div>
                        </li>
                    </volist>
                </ul>
                <!--加载效果-->
                <div class="loaddiv" style="width: 32px;margin: 0 auto 30px;" hidden>
                    <img src="__IMG__/loading.gif"/>
                </div>
                <div class="more">
                    <a href="javascript:;">点击加载更多</a>
                </div>
                <div class="no-more" hidden>
                    <span>没有更多了</span>
                </div>
            </div>
        </div>
    </div>

<include file="Public/footer" />
<script type="text/javascript" src="__JS__/comment.js"></script>
<!--分享插件-->
<script type="text/javascript" src="__JS__/clipboard.js"></script>
<script>
    var g_url = window.location.href;
    $('.share-copy-c input').val(g_url);
    var clip = new Clipboard('#btnCopy');
</script>
<script>window._bd_share_config = {
    "common": {
        "bdSnsKey": {},
        "bdText": "多谱音乐是一款专注于发现与分享乐谱和音乐的产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。",
        "bdMini": "1",
        "bdMiniList": ["bdxc", "tqf", "douban", "bdhome", "sqq", "thx", "ibaidu", "meilishuo", "mogujie", "diandian", "huaban", "duitang", "hx", "fx", "youdao", "sdo", "qingbiji", "people", "xinhua", "mail", "isohu", "yaolan", "wealink", "ty", "iguba", "fbook", "twi", "linkedin", "h163", "evernotecn", "copy", "print"],
        "bdPic": "",
        "bdStyle": "1",
        "bdSize": "32"
    }, "share": {}
};
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
<!--分享插件end-->
<script>
    /*修改title*/
    document.title = '{$scoreInfo.name}';
    /*发表评论*/
    $('#commentBtn').click(function () {
        var userId = $('.remark').attr('data-uid');
        var data = {
            "score_id": $('.score-info').attr('data-id'),
            "user_id": userId,
            "remark": $('.comment-textarea').val()
        };
        $.ajax({
            type: 'post',
            url: '/Home/score/comment',
            data: data,
            dataType: 'json',
            success: function (result) {
                if (result.code == 200) {
                    var jsonObj = result.data;
                    addComment(jsonObj);
                    layer.msg(result.msg, {
                        icon: 1,
                        time: 2000
                    });
                } else if (result.code == 101) {
                    //登录窗口
                    layer.open({
                        type: 2,
                        title: '',
                        shadeClose: true,
                        area: ['600px', '420px'],
                        content: '/Home/login/index'
                    });
                } else if (result.code == 600) {
                    layer.msg(result.msg, {
                        icon: 2,
                        time: 2000
                    });
                }
            }
        })
    });
    //动态添加评论
    function addComment(json) {
        var html = '';
        html += '<li class="padding-left-18 clearfix">';
        html += '<div class="pull-left margin-top-20">';
        html += '<a href="/Home/User/index/id/'+ json.user_info.id + '">';
        html += '<img class="user-avatar" src="' + json.user_info.avatar_url + '">';
        html += '</a>';
        html += '</div>';
        html += '<div class="comment-info margin-left-30 margin-top-20 clearfix">';
        html += '<p class="pull-left"><span class="font-size-16 font-bold">' + json.user_info.nickname + '：</span>' + json.remark + '</p>';
        html += '<p class="pull-right">' + json.create_time + '</p>';
        html += '</div>';
        html += '</li>';
        $('.comment-list .list').prepend(html);
    }

    //总条数少于一页数量时,不显示
    var pageSize = 5;
    var count = '{$comments.count}';
    if (count <= pageSize) {
        $(".comment-list .more").hide();
        $(".comment-list .no-more").show();
    }

    /**
     * 分享按钮
     */
    $('.share-dialog').hide();
    $('#share').click(function () {
        $('.share-dialog').toggle();
    })
    $('.share-close').click(function () {
        $('.share-dialog').hide();
    })

</script>